import React, { useRef, useState } from 'react';
import classnames from 'classnames';

export interface DraggerInterface {
  onFile: (files: FileList) => void;
}

const Dragger: React.FC<DraggerInterface> = ({ onFile, children }) => {
  const [dragOver, setDragOver] = useState<boolean>(false);
  const classes = classnames('upload-dragger', {
    'is-dragover': dragOver,
  });
  const handleDrop = (e: React.DragEvent<HTMLElement>) => {
    e.preventDefault();
    setDragOver(false);
    onFile(e.dataTransfer.files);
  };

  const handleDrag = (e: React.DragEvent<HTMLElement>, over: boolean) => {
    e.preventDefault();
    setDragOver(over);
  };
  return (
    <div
      className={classes}
      onDragOver={e => handleDrag(e, true)}
      onDragLeave={e => handleDrag(e, false)}
      onDrop={handleDrop}
    >
      {children}
    </div>
  );
};

export default Dragger;
